<template>
<div class="news">
  <!-- <Header :bgcolor="'rgba(0,0,0,.8)'" /> -->

  <Carousel class="carousel-mar" :typeid="4" />

  <!-- tab栏 -->
  <div class="border-bot">
    <div class="module-show margin-xauto">
      <div class="flex product-module" :style="{'width': allLen + 'px'}" v-scroll.x="">
        <div
          v-for="(nav, ix) in navs"
          :key="ix"
          @click="handleClick(nav)"
          :class="['product-module-item', 'hand', 'tac', activeName == nav.id ? 'on': '']"
        >{{nav.name}}</div>
      </div>
    </div>
    
  </div>

  <div class="module-show margin-xauto min-h1200">
    <InfoMainList :list="list" v-if="list.length>0" />
    <div class="null tac" v-else>暂无数据</div>
  </div>

  <div class="module-show margin-xauto tac product-page">
    <el-pagination
      :total="count"
      v-if='count'
      @current-change="handlePageChange"
      :current-page.sync='opts.pageIndex'
      :page-size='opts.pageSize'
      size='small'
      background
      layout="total, prev, pager, next, jumper">
    </el-pagination>
  </div>

  <Aside />

  <Footer />
</div>
</template>

<script>
export default {
  components: {
    Header: _ => import('@/components/common/Header'),
    Footer: _ => import('@/components/common/Footer'),
    Carousel: _ => import('@/components/common/Carousel'),
    InfoMainList: _ => import('@/components/common/InfoMainList'),
    Aside: _ => import('@/components/common/Aside'),
  },
  data() {
    return {
      allLen: 2000,
      activeName: '',
      navs: [],
      opts: {
        pageIndex: 1,
        pageSize: 8,
        typeId: '',
      },
      list: [],
      count: 0,
    }
  },
  methods: {
    // 切换分类
    handleClick(val) {
      this.activeName = val.id
      this.opts.typeId = val.id
      this.opts.pageIndex = 1
      this.getListPano()
    },
    // 翻页
    handlePageChange(val) {
      this.getListPano()
    },
    // 获取类型
    getInfoType(isLoadList) {
      this.$api.getInfoTags().then(res => {
        if (res.code == 100) {
          // 计算宽度
          let len = 0
          if (res.data && res.data.length > 0) {
            res.data.map(item => {
              len += 15 * item.name.length + 55
            })
            // console.log(len)
            this.allLen = len
          }
          this.navs = res.data
          if (isLoadList && res.data && res.data.length > 0) {
            this.opts.typeId = res.data[0].id
            this.activeName = res.data[0].id
            this.getListPano()
          }
        }
      })
    },
    // 获取列表
    getListPano() {
      this.$api.getInfoList(this.opts).then(res => {
        // console.log(res)
        if (res.code == 100) {
          if (res.data && res.data.list && res.data.list.length > 0) {
            this.list = res.data.list
            this.count = res.data.count
          } else {
            this.list = []
            this.count = 0
          }
        }
      })
    },
  },
  created() {
    if (this.$route.query && this.$route.query.t) {
      this.activeName = this.$route.query.t
      this.opts.typeId = this.$route.query.t
      this.getInfoType(false)
      this.getListPano()
    } else {
      this.getInfoType(true)
    }
  },
}
</script>

<style lang="stylus" scoped>
.news
  width 100%
  min-width 1200px
  .carousel-mar
    margin-top 51px
  .module-show
    width 1200px
  .border-bot
    border-bottom 1px solid #eeeeee
    margin-top 30px
    .product-module
      width 100%
      height 40px
      .product-module-item
        font-size 15px
        padding 0 20px
        height 40px
        line-height 40px
        margin-right 15px
        color #666
        &:hover
          color var(--themeColor)
        &.on
          color var(--themeColor)
          border-bottom 2px solid var(--themeColor)
  .product-page
    padding-top 10px
    padding-bottom 50px
</style>
